<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #fa{
            width: 600px;
            height: 600px;
            border: 1px solid red;
            margin: 0 auto;
        }
        #fa>div{
            width: 33%;
            height: 33%;
            border: 1px solid red;
            float: left;
            line-height: 200px;
            text-align: center;
            font-size: 30px;
            font-weight: bold;
        }
        #start{
            cursor: pointer;
            background-color: pink;
        }
        #btn{
            width: 100px;
            height: 40px;
            margin: 8px 886px;
            background-color: rgb(65, 157, 188);
        }
    </style>
</head>
<body>
<div id="app">
    <div id="fa">
        <div class="option">谢谢惠顾</div>
        <div class="option">九五折优惠卷</div>
        <div class="option">八五折优惠卷</div>
        <div class="option">八折优惠卷</div>
        <div id="start">开始抽奖</div>
        <div class="option">七五折优惠卷</div>
        <div class="option">七折优惠卷</div>
        <div class="option">九折优惠卷</div>
        <div class="option">谢谢惠顾</div>
        
    </div>
    <button type="button" id="btn"><a href="cartlist.html">返回购物车</a></button>
</div>
<script src="../js/jquery-3.7.1.js"></script>
<script>  
    let quans = '';  
    let options = document.getElementsByClassName('option');  
    let bnt = document.getElementById('start');  
    let timer = null;  
    let count = 0;  
  
    bnt.onclick = function() {  
        count++;  
        if (count > 5) {  
            alert('您抽奖的机会已用完');  
            return;  
        }  
        let num = 0; 
        if (timer == null) {  
            timer = setInterval(() => {  
               // 初始化num到定时器内部  
                let ran = Math.round(Math.random()*(7-0)+0);
                num++;
                for (let i = 0; i < options.length; i++) {  
                    options[i].style.backgroundColor = '#fff';  
                }  
  
                options[ran].style.backgroundColor = 'orange';  
  
                if (num >= 50) {  
                    clearInterval(timer);  
                    timer = null;  
                    console.log(options[ran].innerHTML + "中奖了");  
                    quans = options[ran].innerHTML;  
                    console.log(quans);  
  
                    // 检查quans数组长度并发送请求  
                    if (quans != "") {
                        if(quans == "九五折优惠卷"){
                            sendDataToServer(0.95);
                        }else if(quans == "九折优惠卷"){
                            sendDataToServer(0.9);
                        }else if(quans == "八五折优惠卷"){
                            sendDataToServer(0.85);
                        }else if(quans == "八折优惠卷"){
                            sendDataToServer(0.8);
                        }else if(quans == "七五折优惠卷"){
                            sendDataToServer(0.75);
                        }else if(quans == "七折优惠卷"){
                            sendDataToServer(0.7);
                        }else{
                            sendDataToServer(0);
                        }  
                        quans = '';    
                    }  
                }  
            }, 100);  
        }  
    };  
  
    // 发送数据到服务器的函数  
    function sendDataToServer(data) {
        let val = data;
        console.log("发请求楼"+data);   
        if(val==0){
            return;
        }else{
            $.ajax({
				type:"POST",//请求方式
				url:"../userController/sendDataToServer",//请求地址
				data:{//请求参数
					quans:val
				},
				async:true,//同异步	true异步
				dataType:"text",//返回的数据格式默认text
				success(data){//请求成功的回调函数
					if(data>0){
						alert("优惠卷获取成功");
					}else{
						alert("优惠券获取失败");
					}
				},
				error(err){//请求失败的回调函数
					console.log(err);
				}
			});
        }
    }  
</script>
</body>
</html>